<script setup lang="ts">
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { HomeFilled, SwitchButton, MapLocation, Picture, Star, Tools, Setting, Document, Location, Guide } from '@element-plus/icons-vue'

const userStore = useUserStore()
const router = useRouter()

// 控制侧边栏折叠状态
const isCollapse = ref(false)

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 处理退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<template>
  <div class="sidebar-container">
    <el-menu
      :collapse="isCollapse"
      :default-active="$route.path"
      class="sidebar-menu"
      router
      background-color="#2e7d32"
      text-color="#fff"
      active-text-color="#ffc107"
    >
      <!-- 顶部用户信息 -->
      <div class="user-profile">
        <el-avatar :size="isCollapse ? 40 : 64" :src="userStore.currentUser?.avatar">
          {{ userStore.currentUser?.name?.substring(0, 1) || userStore.currentUser?.username.substring(0, 1) }}
        </el-avatar>
        <div class="user-info" v-if="!isCollapse">
          <h3>{{ userStore.currentUser?.name || userStore.currentUser?.username }}</h3>
          <el-tag size="small" :type="userStore.isAdmin ? 'danger' : 'success'">
            {{ userStore.isAdmin ? '管理员' : '普通用户' }}
          </el-tag>
        </div>
      </div>

      <!-- 导航菜单 -->
      <el-menu-item index="/" class="menu-item">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>

      <!-- 保护区管理菜单，只对管理员显示 -->
      <el-menu-item
        v-if="userStore.isAdmin"
        index="/scenic-management"
        class="menu-item"
      >
        <el-icon><MapLocation /></el-icon>
        <template #title>保护区管理</template>
      </el-menu-item>

      <!-- 景点要素管理菜单，只对管理员显示 -->
      <el-menu-item
        v-if="userStore.isAdmin"
        index="/scenic-point-crud"
        class="menu-item"
      >
        <el-icon><Tools /></el-icon>
        <template #title>景点要素管理</template>
      </el-menu-item>

      <!-- 保护区浏览菜单，对所有用户显示 -->
      <el-menu-item
        index="/scenic-browse"
        class="menu-item"
      >
        <el-icon><Picture /></el-icon>
        <template #title>保护区浏览</template>
      </el-menu-item>

      <!-- 保护区推荐菜单，只对普通用户显示 -->
      <el-menu-item
        v-if="userStore.isRegular"
        index="/scenic-recommend"
        class="menu-item"
      >
        <el-icon><Star /></el-icon>
        <template #title>景点推荐</template>
      </el-menu-item>

      <!-- 景点导航菜单，对所有用户显示 -->
      <el-menu-item
        index="/scenic-navigation"
        class="menu-item"
      >
        <el-icon><Guide /></el-icon>
        <template #title>景点导航</template>
      </el-menu-item>

      <!-- 科学研究菜单，对所有用户显示 -->
      <el-menu-item
        index="/scientific-research"
        class="menu-item"
      >
        <el-icon><Location /></el-icon>
        <template #title>科学研究</template>
      </el-menu-item>

      <!-- 保护区信息反馈菜单，只对普通用户显示 -->
      <el-menu-item
        v-if="userStore.isRegular"
        index="/maintenance-report"
        class="menu-item"
      >
        <el-icon><Tools /></el-icon>
        <template #title>信息反馈</template>
      </el-menu-item>

      <!-- 反馈记录查看菜单，只对普通用户显示 -->
      <el-menu-item
        v-if="userStore.isRegular"
        index="/maintenance-records"
        class="menu-item"
      >
        <el-icon><Document /></el-icon>
        <template #title>反馈记录</template>
      </el-menu-item>
      <!-- 教育科普菜单，对所有用户显示 -->
      <el-menu-item
        index="/environmental-education"
        class="menu-item"
      >
        <el-icon><Document /></el-icon>
        <template #title>教育科普</template>
      </el-menu-item>




      <!-- 维修管理菜单，只对管理员显示 -->
      <el-menu-item
        v-if="userStore.isAdmin"
        index="/maintenance-management"
        class="menu-item"
      >
        <el-icon><Setting /></el-icon>
        <template #title>维修管理</template>
      </el-menu-item>

      <!-- 退出登录按钮 -->
      <div class="logout-container">
        <el-button
          type="danger"
          :icon="SwitchButton"
          @click="handleLogout"
          :class="{ 'collapse-button': isCollapse }"
        >
          <span v-if="!isCollapse">退出登录</span>
        </el-button>
      </div>

      <!-- 折叠按钮 -->
      <div class="collapse-control">
        <el-button
          type="primary"
          @click="toggleCollapse"
          circle
          size="small"
        >
          <el-icon>
            <i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
          </el-icon>
        </el-button>
      </div>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
.sidebar-container {
  height: 100%;
  position: relative;
}

.sidebar-menu {
  height: 100%;
  border-right: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.1);

  .user-info {
    margin-top: 10px;
    text-align: center;

    h3 {
      margin: 5px 0;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.menu-item {
  margin: 8px 0;
  transition: all 0.3s ease;
  border-radius: 4px;
  overflow: hidden;

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.logout-container {
  position: absolute;
  bottom: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  box-sizing: border-box;

  .el-button {
    width: 100%;
    transition: all 0.3s ease;
    border-radius: 4px;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  .collapse-button {
    padding: 12px;
    min-height: 40px;
  }
}

.collapse-control {
  position: absolute;
  bottom: 16px;
  width: 100%;
  display: flex;
  justify-content: center;

  .el-button {
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
    }
  }
}

// 自定义图标
.el-icon-arrow-left:before {
  content: "◀";
}

.el-icon-arrow-right:before {
  content: "▶";
}
</style>
